// html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 重新打包的时候删除旧的生成文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
// 消除冗余的css代码插件
const PurifyCsswebpack = require('purifycss-webpack');
const glob = require('glob');

// webpack3.x压缩js文件的插件
// const  uglifyjsWebpackplugin = require('uglifyjs-webpack-plugin');
// 提取css文件的插件（mini-css-extract-plugin）
const  ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const path = require('path');
// 静态资源输出
const copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    // webpack --mode development生成的包不压缩，适合开发环境
    // webpack --mode production生成的包已经压缩，适合生产环境
    // webpack4.x可以在npm运行脚本script里面写也可以在这里写
    mode:'development',
    // A 入口
    entry:{
        index:'./src/index.js',
        index2:'./src/index2.js',
        a:'./src/css/a.css',
        b:'./src/css/b.css',
        c:'./src/less/a.less',
        d:'./src/sass/a.scss',
        jquery:'jquery'
        
    },
    // B 出口
    output:{
        path:__dirname+'/dist',
        // webpack4.x版本入口使用对象时出口一定要用[name]
        filename:'[name]-bundle.js'
    },
    // C 配置rules:规则
    module:{
        // 规则是数组，数组里面的每一项
        rules:[
            {
                test:/\.(js|jsx)$/,
                use:['babel-loader'],
                exclude:'/node_modules/'
            },
            {
                 // cnpm i style-loader css-loader -D
                test:/\.css$/,
                // 提取
                use:ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','postcss-loader'],
                    // 背景图引入的路径
                    publicPath:'../'
                })
            },
            {
                //cnpm i file-loade url-loader -D
                test:/\.(png|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        // 图片大于5KB时图片自动转为base64,不转换的图片不会生成新文件
                        limit:5000,
                        // 打包后图片存在images文件夹中
                        outputPath:'images'
                    }
                }
            },
            {
                // cnpm i less less-loader -D
                test:/\.less$/,
                //不分离的情况
                // use:['style-loader','css-loader','less-loader']
                use:ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','less-loader']
                })

            },
            {
                // cnpm i node-sass sass-loader -D
                test:/\.(sass|scss)$/,
                use:ExtractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader'],
                })
            }
        ]
    },
    //D 插件
    plugins:[
        // new uglifyjsWebpackplugin(),
        // 启动热更新
        new webpack.HotModuleReplacementPlugin(),
        // 重新打包的时候删除dist文件夹再重新生成
        new CleanWebpackPlugin(['dist'],{
            root: path.join(__dirname, './'),  // 根目录
            verbose: true,  // 开启在控制台输出信息
            dry: false    // 启用删除文件
        }),
        // 可有多个html文件
        new HtmlWebpackPlugin({
            // 生成在dist中的html文件的名称
            filename:'index.html',
            // 定义生成的index.html引入的是入口命名为index的js文件
            // chunks:['jquery','index'],
            // 引入的js文件后面带hash值
            hash:true,
            // title标签，模块中要用ejs的格式去写htmlWebpackPulgin.options.title
            title:'我们的家',
            // src中的index.html模板
            template:'./src/index.html'
        }),
        new ExtractTextWebpackPlugin('css/[name].css'),
        new PurifyCsswebpack({
            // 消除冗余的css代码
            paths:glob.sync(path.join(__dirname,'src/*.html'))

        }),
        new copyWebpackPlugin([{
            from:path.join(__dirname,'src/assets'),
            to:'./puild'
        }]),
        // 引入jquery方式打包在js里面
        // new webpack.ProvidePlugin({
        //     $:'jquery'
        // })

    ],
     // 引入jquery方式单独打包出来
    //  optimization:{
    //      splitChunks:{
    //          cacheGroups:{
    //              vendor:{
    //                  chunks:'initial',
    //                  name:'jquery',
    //                  enforce:true
    //              }
    //          }
    //      }
    //  },
    
    // E 开发服务器,下载webpack-dev-server不需要引入
    devServer:{
        // 设置服务器访问的基本目录
        contentBase:__dirname+'/dist',
        // 服务器ip地址
        host:'localhost',
        // 端口
        port:'8010',
        // 自动打开浏览器
        open:true,
        // 热更新
        hot:true
    },
    // webpack3.x之前怎么开启调试
    // devtool:'source-map'
}



// 使用自动添加前缀
// 1、cnpm i postcss-loader autoprefixer -D
// 2、新建postcss.config.js
// 3、在css对象里面加上postcss-loader



 // 3种写法
// loader:['style-loader','css-loader'],
// use:[
//     {loader:'style-loader'},
//     {loader:'css-loader'}
// ],
// use:['style-loader','css-loader']



// 需要两个html模板时
//   new HtmlWebpackPlugin({
//    filename:'index.html',
//    chunks:['index'],
//    hash:true,
//    title:'我们的家',
//    template:'./src/index.html'
//   }),
//  new HtmlWebpackPlugin({
//     filename:'index2.html',
//     chunks:['index2'],
//     hash:true,
//     title:'第二个',
//     template:'./src/index2.html'
//  }),



// 消除冗余的css
// cnpm i purifycss-webpack purify-css -D
// 引入purifycss-webpack
// 引入一个额外的包glob
// 在插件里面配置：paths:glob.sync(path.join(__dirname,'src/*.html'))



// webpack3.x之前怎么开启调试
// devtool:'source-map'



// babel
// ---babel用来编译js
// ---让你轻松使用es的新版本
//1 cnpm i babel-loader babel-core babel-preset-env -D
//2 在根目录建.babelrc文件配置env
//3  {
//     test:/\.(js|jsx)$/,
//     use:['babel-loader'],
//     exclude:'/node_modules/'
// },





// 静态资源输出
// const copyWebpackPlugin = require('copy-webpack-plugin');
//  new copyWebpackPlugin([{
//     from:path.join(__dirname,'src/assets'),
//     to:'./puild'
// }])



// 第三方插件引入(打包到js中)
// 1、直接在js文件中引入（不推荐：引入的库如果没使用也会被打包进去）
// 2、在webpack配置文件中配置（推荐：在没有使用的情况下不会被打包进去）
 // new webpack.ProvidePlugin({
//     $:'jquery'
 // })



//  第三方插件引入（单独打包），在config对象下去设置
    //  optimization:{
    //      splitChunks:{
    //          cacheGroups:{
    //              vendor:{
    //                  chunks:'initial',
    //                  name:'jquery',
    //                  enforce:true
    //              }
    //          }
    //      }
    //  },








